<template>
  <div>
    <!-- 需求：根据输入的重量来计算总价，折后价格，节省了多少 -->
    <table>
      <caption>欢迎光临</caption>
      <!-- 商品信息 -->
      <tr>
        <td> <h1> {{fruitinfo.name}} {{fruitinfo.price}}￥/斤，折扣 &lt;{{fruitinfo.discount *10}} 折&gt;</h1> </td>
      </tr>
      <!-- 购买重量 -->
      <tr>
        <td>请输入重量：<input v-model="weight" type="text"> </td>
      </tr>
      <!-- 结算按钮 -->
      <tr>
        <td>
          <button @click="pay"> 结算 </button>
        </td>
      </tr>
      <!-- 账单 -->
      <tr>
        <td>
          <p>总价： {{bill.allprice}} ￥元 折后： {{bill.suerprice}} ￥元 节省： {{bill.save}} ￥元</p>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data (){
    return {
      // 水果信息
      fruitinfo:{
        name:'西瓜',
        price:1,
        discount:0.8
      },
      // 重量
      weight:0,
      // 账单
      bill :{
        // 总价
        allprice:'0.00',
        // 实际金额
        suerprice:'0.00',
        // 节省
        save:'0.00'
      }
    }
  },
  methods: {
    // 结算按钮点击事件
    pay(){
      // 通过.toFixed(2)保留小数点后两位
      this.bill.allprice = (this.fruitinfo.price * this.weight).toFixed(2)
      this.bill.suerprice = (this.fruitinfo.price * this.weight * this.fruitinfo.discount).toFixed(2)
      this.bill.save= (this.fruitinfo.price * this.weight - this.fruitinfo.price * this.weight * this.fruitinfo.discount).toFixed(2)
  }
}
}
</script>